<template>
  <div class="species-list-container">
    <div class="">
      <CardBox title="物种列表"></CardBox>
      <div class="content-container">
        <div class="resource-library">
          <div class="resource-library-header">
            <div
              class="resource-library-header-item"
              v-for="item in resourceData"
              :key="item.id"
            >
              <div class="resource-library-header-item-text">
                {{ item.text }}
              </div>
              <div class="resource-library-header-item-number">
                {{ item.number }}
              </div>
            </div>
          </div>
        </div>
        <el-table :data="tableData" height="340" stripe @row-click="handleRowClick" style="width: 100%; overflow-y: auto;">
          <el-table-column prop="name" label="名称" width="100" show-overflow-tooltip>
            <template v-slot="scope">
              <span class="ellipsis">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="latin" label="拉丁名称" show-overflow-tooltip>
            <template v-slot="scope">
              <span style="font-style: italic;" class="ellipsis">{{ scope.row.latin }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="family" label="科名" width="90" show-overflow-tooltip>
            <template v-slot="scope">
              <span class="ellipsis">{{ scope.row.family }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="genus" label="属名" width="90" show-overflow-tooltip>
            <template v-slot="scope">
              <span class="ellipsis">{{ scope.row.genus }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import CardBox from "@/components/Global/CardBox.vue";
import {EventBus} from "../../utils/event-bus";
export default {
  components: {
    CardBox,
  },
  created() {
    EventBus.$on('select-subclass-id', (message) => {
      this.$api.species.getDetailList({subclassId:""+message.id,limit:'1000',
        order: "asc", orderField: "detail_id"}).then(res => {
        this.tableData=res;
        EventBus.$emit('select-species', res[0]);
        var family=[];
        var genus=[];
        var species=[];
        for (let i = 0; i < res.length; i++) {
          family=this.uniqueArr4(res,"family");
          genus=this.uniqueArr4(res,"genus");
          species=this.uniqueArr4(res,"name");
        }
        this.resourceData[0].number=family.length;
        this.resourceData[1].number=genus.length;
        this.resourceData[2].number=species.length;
      });

    })
  },
  data() {
    return {
      resourceData: [
        {
          id: "family",
          text: "科",
          number: 0,
        },
        {
          id: "genus",
          text: "属",
          number: 0,
        },
        {
          id: "species",
          text: "种",
          number: 0,
        },
      ],
      tableData: Array.from({ length: 11 }).map((_, i) => ({
        name: `斑鸠${i+1}`,
        lartinName: `Streptopelia${i+1}`,
        keName: `鸠鸽科${i+1}`,
        shuName: `斑鸠属${i+1}`,
      })),
    };
  },
  methods: {
    uniqueArr4(arr,name) {
      const map = new Map();
      return arr.filter((item) => !map.has(item[name]) && map.set(item[name], 1));
    },
    handleRowClick(row) {
      EventBus.$emit('select-species', row)
    }
  },
};
</script>

<style lang="scss" scoped>
.content-container {
  height: 408px;
  padding: 10px;
  margin-bottom: 20px;
}
.resource-library {
  padding:17px 17px 0;
}
.resource-library-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 17px;
  gap: 10px;
  .resource-library-header-item {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    .resource-library-header-item-text {
      font-size: 14px;
      width: 28px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      color: #fff;
    }
    .resource-library-header-item-number {
      font-size: 16px;
      color: #fff;
      margin-left: 10px;
    }
  }
}
</style>
<style lang="scss" scoped>
  :deep(.el-table) {
    background: url('@/assets/img/table-bg-3.png') no-repeat center center;
    background-size: 100% 100%;
    font-size: 14px;

    &::before {
      display: none;
    }

    tr {
      background: transparent;
      height: 28px;
    }

    .el-table__body {
      tr {
        &.el-table__row--striped td {
          background: rgba(65, 123, 214, 0.19);
        }
        &:hover {
          td {
            color: #ccc !important;
            background: rgba(65, 123, 214, 0.19) !important;
          }
        }
      }
    }

    th.el-table__cell {
      background: rgba(65, 123, 214, 0.19) !important;
      border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      color: #fff !important;
      font-weight: 500;
      padding: 4px 10px;
      height: 28px;
      line-height: 20px;

      &.is-leaf {
        border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      }

      &:hover {
        background: rgba(65, 123, 214, 0.19) !important;
        color: #fff !important;
      }
    }

    td.el-table__cell {
      background: transparent;
      border-bottom: 1px solid rgba(0, 150, 255, 0.3);
      color: #ccc;
      padding: 4px 10px;
      height: 28px;
      line-height: 20px;
      cursor: pointer;
      &:last-child {
        font-family: DIN Pro;
      }
    }

    .el-table__body tr.hover-row > td.el-table__cell {
      background: rgba(65, 123, 214, 0.19);
    }

    .el-table__body tr:hover > td.el-table__cell {
      background: rgba(65, 123, 214, 0.19);
    }

    .el-table__body-wrapper {
      overflow-x: hidden;
    }
  }
</style>


